import React from 'react';
import styles from './index.less';
import { Menu } from 'antd';
import { useHistory } from 'dva';
import { PieChartOutlined, MailOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;
const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];

const Sider = props => {
  const { collapsed, sideBarWidth, openKeys, setOpenKeys, selectedKey, setSelectedKey } = props;

  const history = useHistory();

  const onSelect = e => {
    setSelectedKey([e.key]);
    switch (e.key) {
      case '首页':
        history.push('/home');
        break;
      case '菜单1':
        history.push('/news');
        break;
      case '测试目录1':
        history.push('/news/about');
        break;
      default:
        break;
    }
  };

  const onOpenChange = keys => {
    const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  return (
    <Menu
      mode="inline"
      openKeys={openKeys}
      onOpenChange={onOpenChange}
      className={styles.Menu}
      inlineCollapsed={collapsed}
      selectedKeys={selectedKey}
      onSelect={e => {
        onSelect(e);
      }}
      style={{ width: sideBarWidth }}
    >
      <Menu.Item key={'首页'} className={styles.MenuItem} icon={<PieChartOutlined />}>
        首页
      </Menu.Item>
      <SubMenu key={'菜单1'} title={'菜单1'} className={styles.SubMenu} icon={<MailOutlined />}>
        <Menu.Item key={'测试目录1'} className={styles.MenuItem}>
          {' '}
          测试目录1
        </Menu.Item>
      </SubMenu>
    </Menu>
  );
};

export default Sider;
